<template>
	<view>
		<view class="flex-row flex-items-center flex-between"
			style="margin-left: 16px; margin-right: 16px; height: 32px;"
			:style="{marginTop: $uv.addUnit(statusBarHeight + 12)}">
			<view class="flex-row flex-items-center">
				<view v-for="(item,index) in tabs" :key="index" class="community-tab font-weight-medium"
					:class="[index == tabIndex && 'community-tab__active']" @click="tabTap(index)">
					{{ item }}
				</view>
			</view>
			<image src="../../../static/logo.png" style="width: 20px; height: 20px;"></image>
		</view>
		<view style="margin-top: 16px; " :style="{height: pageHeight + 'px'}">
			<mescroll-uni :height="pageHeight+ 'px'" @init="mescrollInit" @down="downCallback" @up="upCallback"
				:down="downOption" :up="upOption">
				<view v-if="tabIndex == 0">
					<view
						style="margin-left: 12px; margin-right: 12px; margin-bottom: 12px; background-color: white; border-radius: 12px; padding: 16px 12px;">
						<text class="font-14 font-weight-regular" style="color: #313C56;">张三李四等人评论了您的社区分享，<text
								class="font-14 font-weight-regular" style="color: #0066FF;">快去查看吧～</text></text>
					</view>
					<communityItem v-for="(item,index) in dataList" :key="index"
						style="margin-left: 12px; margin-right: 12px;"></communityItem>
				</view>
				<view v-else>
					<informationItem v-for="(item,index) in dataList" :key="index"
						style="margin-left: 12px; margin-right: 12px;"></informationItem>
				</view>
			</mescroll-uni>
		</view>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import communityItem from "./community-item.vue"
	import informationItem from "./information-item.vue"
	export default {
		name: "community",
		mixins: [MescrollMixin], // 使用mixin
		components: {
			communityItem,
			informationItem
		},
		data() {
			return {
				tabIndex: 0,
				tabs: ['社区', '资讯'],
				// 下拉刷新的配置(可选, 绝大部分情况无需配置)
				downOption: {
					page: {
						size: 10 // 每页数据的数量,默认10
					},
				},
				// 上拉加载的配置(可选, 绝大部分情况无需配置)
				upOption: {
					page: {
						size: 10 // 每页数据的数量,默认10
					},
					noMoreSize: 5, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
					textNoMore: '-- 没有更多了 --',
					empty: {
						use: false
					}
				},
				// 列表数据
				dataList: [1, 1, 1, 1, 1]
			};
		},
		computed: {
			statusBarHeight() {
				const sys = uni.$uv.sys()
				return sys.statusBarHeight
			},
			navbarHeight() {
				return this.statusBarHeight + 44
			},
			screenWidth() {
				const sys = uni.$uv.sys()
				return sys.windowWidth
			},
			pageHeight() {
				const sys = uni.$uv.sys()
				return sys.windowHeight - this.statusBarHeight - 70 - this.toolbarHeight
			},
			scrollHeight() {
				return this.pageHeight - this.toolbarHeight - 10
			},
			toolbarHeight() {
				const sys = uni.$uv.sys()
				return sys.safeAreaInsets.bottom + 50
			}
		},
		methods: {
			tabTap(index) {
				this.tabIndex = index
			},
			async upCallback(page) {
				// const res = await orderListApi({
				// 	page: page.num,
				// 	limit: page.size,
				// 	orderStatus: this.tabs[this.tabIndex].orderStatus,
				// 	type: 1,
				// 	serviceStatus: 0
				// })
				// console.log(res.data)
				// // 接口返回的当前页数据列表 (数组)
				// var curPageData = res.data.list;
				// // 接口返回的当前页数据长度 (如列表有26个数据,当前页返回8个,则curPageLen=8)
				// let curPageLen = curPageData.length;
				// // 接口返回的总页数 (如列表有26个数据,每页10条,共3页; 则totalPage=3)
				// let totalPage = res.data.totalCount;
				// //设置列表数据
				// if (page.num == 1) this.dataList = []; //如果是第一页需手动置空列表
				// this.dataList = this.dataList.concat(curPageData); //追加新数据
				// // 请求成功,隐藏加载状态
				// this.mescroll.endByPage(curPageLen, totalPage);

				this.mescroll.endErr()
			},
		}
	}
</script>

<style lang="scss">
	.community-tab {
		font-size: 16px;
		font-weight: 400;
		color: #95A4B3;
		margin-right: 24px;

		&__active {
			font-size: 22px;
			font-weight: 500;
			color: #313C56;
		}
	}
</style>